// 加速曲线，模拟重力加速
$accelerate: cubic-bezier(0.55, 0, 0.85, 0.3);
// 减速曲线，模拟重力减速
$decelerate: cubic-bezier(0.25, 0.46, 0.45, 0.94);

// 模拟抛物线运动
@mixin parabola(
  $duration: 2s,
  $xMove: calc(100vw - 100%),
  $yMove: calc(100vh - 100%)
) {
  animation: ballMoveX $duration linear forwards,
    ballMoveY $duration $accelerate forwards;
  animation-composition: add;
  @at-root {
    @keyframes ballMoveX {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX($xMove);
      }
    }
    @keyframes ballMoveY {
      from {
        transform: translateY(0);
      }
      to {
        transform: translateY($yMove);
      }
    }
  }
}

//--------------------------------------------
// 缓动曲线
$ease: linear(
  0 0%,
  0 2.27%,
  0.02 4.53%,
  0.04 6.8%,
  0.06 9.07%,
  0.1 11.33%,
  0.14 13.6%,
  0.25 18.15%,
  0.39 22.7%,
  0.56 27.25%,
  0.77 31.8%,
  1 36.35%,
  0.89 40.9%,
  0.85 43.18%,
  0.81 45.45%,
  0.79 47.72%,
  0.77 50%,
  0.75 52.27%,
  0.75 54.55%,
  0.75 56.82%,
  0.77 59.1%,
  0.79 61.38%,
  0.81 63.65%,
  0.85 65.93%,
  0.89 68.2%,
  1 72.7%,
  0.97 74.98%,
  0.95 77.25%,
  0.94 79.53%,
  0.94 81.8%,
  0.94 84.08%,
  0.95 86.35%,
  0.97 88.63%,
  1 90.9%,
  0.99 93.18%,
  0.98 95.45%,
  0.99 97.73%,
  1 100%
);
// 小球弹跳动画
@mixin ballBounce($duration: 2s, $distanceY: 350px, $distanceX: 150px) {
  animation: ballDrop $duration infinite $ease,
    moveX $duration infinite ease-out;
  animation-composition: add;
  @at-root {
    @keyframes ballDrop {
      50%,
      100% {
        transform: translateY($distanceY);
      }
    }
    @keyframes moveX {
      60%,
      100% {
        transform: translateX($distanceX);
      }
    }
  }
}
